<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./script/d3.v7.min.js"></script>
</head>
<body>
<div class="test">

</div>
<script>
    let dataset=[250,210,170,130,90,80,100,300,65,77,235,400]
    let scaleLinear=d3.scaleLinear().domain([0,d3.max(dataset)]).range([0,100])
    let rectHeight=20
    let g=d3.select('.test').append('svg').append('g')
    dataset.forEach(i=>g.append('rect'))
    g.attr("height",(rectHeight)*dataset.length).selectAll('rect').data(dataset).attr('x',10).attr("y",function(d,i){
        return i*rectHeight
    }).attr("width",function(d,i){
        return scaleLinear(d)
    }).attr("height",rectHeight-5).attr("fill","orange").insert('p').text(function(d,i){
        return d
    })
    d3.select('svg').attr("height",(rectHeight+2)*dataset.length).attr("width",scaleLinear(d3.max(dataset)))
    var xAxis=d3.axisBottom(scaleLinear).ticks(5)
    g.append('g').attr('transform','translate('+0+','+(dataset.length*rectHeight)+')').call(xAxis)
</script>
</body>
</html>